{% block sw_entity_many_to_many_assignment_card %}
<mt-card
    class="sw-many-to-many-assignment-card"
    position-identifier="sw-many-to-many-assignment"
    v-bind="$attrs"
>
    {% block sw_entity_many_to_many_assignment_card_content %}
    <template #default>
        {% block sw_entity_many_to_many_assignment_card_head %}
        <div class="sw-many-to-many-assignment-card__select-container">

            {% block sw_entity_many_to_many_assignment_card_pre_select %}
            <slot name="prepend-select"></slot>
            {% endblock %}

            {% block sw_entity_many_to_many_assignment_card_select %}
            <slot name="select">
                <sw-select-base
                    ref="selectBase"
                    class="sw-entity-many-to-many-select"
                    :disabled="disabled || undefined"
                    :label="selectLabel"
                    :is-loading="isLoadingResults"
                    v-bind="$attrs"
                    @select-expanded="onSelectExpanded"
                    @select-collapsed="onSelectCollapsed"
                >

                    <template #sw-select-selection="{ identification, error, disabled, size, expand, collapse }">
                        {% block sw_entity_many_to_many_assignment_card_search_field %}
                        <input
                            ref="searchInput"
                            tabindex="-1"
                            :placeholder="placeholder"
                            :value="searchTerm"
                            :disabled="disabled"
                            @input="onSearchTermChange"
                        >
                        {% endblock %}
                    </template>

                    <template #results-list>
                        {% block sw_entity_many_to_many_assignment_card_results_list %}
                        <sw-select-result-list
                            ref="swSelectResultList"
                            :options="resultCollection"
                            :is-loading="isLoadingResults"
                            :empty-message="$tc('global.sw-entity-many-to-many-select.messageNoResults', { term: searchTerm }, 0)"
                            :focus-el="$refs.searchInput"
                            @paginate="paginateResult"
                            @item-select="onItemSelect"
                        >

                            <template #before-item-list>
                                {% block sw_entity_many_to_many_assignment_card_results_list_before %}
                                <slot name="before-item-list"></slot>
                                {% endblock %}
                            </template>

                            <template #result-item="{ item, index }">
                                {% block sw_entity_many_to_many_assignment_card_results_list_result %}
                                <slot
                                    name="result-item"
                                    v-bind="{ item, index, labelProperty, valueProperty: 'id', searchTerm, highlightSearchTerm, isSelected, onItemSelect, getKey }"
                                >

                                    {% block sw_entity_many_to_many_assignment_card_results_list_list_item %}
                                    <sw-select-result
                                        :selected="isSelected(item)"
                                        v-bind="{ item, index }"
                                        @item-select="onItemSelect"
                                    >

                                        {% block sw_entity_many_to_many_assignment_card_results_list_list_item_label %}
                                        <slot
                                            name="result-label-property"
                                            v-bind="{ item, index, labelProperty, valueProperty: 'id', searchTerm, highlightSearchTerm, getKey }"
                                        >
                                            <sw-product-variant-info
                                                v-if="displayVariants"
                                                :variations="item.variation"
                                                :highlighted="true"
                                                :search-term="searchTerm"
                                            >
                                                {{ getKey(item,labelProperty) || getKey(item, `translated.${labelProperty}`) }}
                                            </sw-product-variant-info>
                                            <sw-highlight-text
                                                v-else-if="highlightSearchTerm"
                                                :text="getKey(item,labelProperty) || getKey(item, `translated.${labelProperty}`)"
                                                :search-term="searchTerm"
                                            />
                                            <template v-else>
                                                {{ getKey(item,labelProperty) || getKey(item, `translated.${labelProperty}`) }}
                                            </template>
                                        </slot>
                                        {% endblock %}
                                    </sw-select-result>
                                    {% endblock %}
                                </slot>
                                {% endblock %}
                            </template>

                            <template #after-item-list>
                                {% block sw_entity_many_to_many_assignment_card_results_list_after %}
                                <slot name="after-item-list"></slot>
                                {% endblock %}
                            </template>

                        </sw-select-result-list>
                        {% endblock %}
                    </template>
                </sw-select-base>
            </slot>
            {% endblock %}
        </div>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_entity_many_to_many_assignment_card_grid %}
    <template #grid>
        <slot name="data-grid">
            <sw-data-grid
                class="sw-many-to-many-assignment-card__grid"
                :data-source="gridData"
                :is-loading="isLoadingGrid"
                :columns="columns"
                :v-bind="$attrs"
                :show-selection="false"
                :plain-appearance="true"
            >

                <template
                    v-for="column in columns"
                    #[`column-${column.property}`]="columnProps"
                >
                    {% block sw_entity_many_to_many_assignment_card_grid_column %}
                    <slot
                        :name="`column-${column.property}`"
                        v-bind="{ ...columnProps, searchTerm, highlightSearchTerm }"
                    ></slot>
                    {% endblock %}
                </template>

                <template #actions="{ item }">
                    {% block sw_entity_many_to_many_assignment_card_grid_column_actions %}
                    <sw-context-menu-item
                        variant="danger"
                        :disabled="disabled || undefined"
                        @click="removeFromGrid(item)"
                    >
                        {{ $tc('global.entity-components.labelRemoveAssociation') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </template>

                <template #pagination>
                    {% block sw_entity_many_to_many_assignment_card_grid_footer %}
                    {% block sw_entity_many_to_many_assignment_card_grid_footer_remote_mode %}
                    <template v-if="!localMode">
                        <sw-pagination
                            v-if="total > 0"
                            v-bind="{ limit, page, total }"
                            :auto-hide="false"
                            @page-change="paginateGrid"
                        />

                        <div
                            v-else-if="!!searchTerm"
                            class="sw-many-to-many-assignment-card__empty-state"
                        >
                            <mt-icon
                                name="regular-search"
                                size="20px"
                            />
                            {{ $tc('global.sw-select-result-list.messageNoResults') }}
                        </div>

                        <div
                            v-else
                            class="sw-many-to-many-assignment-card__empty-state"
                        >
                            <slot name="empty-state"></slot>
                        </div>
                    </template>
                    {% endblock %}

                    {% block sw_entity_many_to_many_assignment_card_grid_footer_local_mode %}
                    <template v-else>
                        <div
                            v-if="total === 0"
                            class="sw-many-to-many-assignment-card__empty-state"
                        >
                            <slot name="empty-state"></slot>
                        </div>
                    </template>
                    {% endblock %}
                    {% endblock %}
                </template>
            </sw-data-grid>
        </slot>
    </template>
    {% endblock %}
</mt-card>
{% endblock %}
